<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>lazyload</title>
  <link rel="stylesheet" href="./normalize.css" />
  <link rel="stylesheet" href="./index.css" />
  <script src="./index.js"></script>
</head>

<body>
  <div class="container">
    <div class="img-area">
      <img class="my-photo" alt="loading" data-src="./img/img1.png">
    </div>
    <div class="img-area">
      <img class="my-photo" alt="loading" data-src="./img/img2.png">
    </div>
    <div class="img-area">
      <img class="my-photo" alt="loading" data-src="./img/img3.png">
    </div>
    <div class="img-area">
      <img class="my-photo" alt="loading" data-src="./img/img4.png">
    </div>
    <div class="img-area">
      <img class="my-photo" alt="loading" data-src="./img/img5.png">
    </div>
    <div class="img-area">
      <img class="my-photo" alt="loading" data-src="./img/img6.png">
    </div>
    <div class="img-area">
      <img class="my-photo" alt="loading" data-src="./img/img7.png">
    </div>
    <div class="img-area">
      <img class="my-photo" alt="loading" data-src="./img/img8.png">
    </div>
    <div class="img-area">
      <img class="my-photo" alt="loading" data-src="./img/img9.png">
    </div>
    <div class="img-area">
      <img class="my-photo" alt="loading" data-src="./img/img10.png">
    </div>
  </div>
  <script>
    window.onload=checkImgs;
    window.onscroll = throttle(checkImgs);
  </script>
</body>

</html>
